<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉列对象</title>
    <script>
        function f1(){
            // 在HTML中,每一个select标签都对应DOM中的一个Select对象
            // 每一个option标签都对应DOM中的一个Option对象
            // 获取Select对象
            let s1 = document.getElementById("s1");

            // 通过Select对象可以获取到该对象中所有的Option对象
            // 由于一个Select对象中可以有多个Option对象,因此返回值为Option对象数组
            let ops = s1.options;
            for(let i = 0; i < ops.length; i++){
                // console.log(ops[i]);
                // console.log("文本值:"+ops[i].text+",服务器值:"+ops[i].value)
                // 获取所选选项的索引号
                // if(ops[i].selected){
                //     console.log(i);
                // }
            }


            // 获取当前下拉列对象中所选选项的索引号
            let index = s1.selectedIndex;
            // console.log(index);
            console.log("当前所选选项的文本值:"+ops[index].text+",服务器值:"+ops[index].value);
        }

        function f2(){
            // 当DOM中数组的内容发生改变时,预支对应的HTML也会随之重新渲染
            let s1 = document.getElementById("s1");
            // 获取文本值与服务器值
            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;
            // 创建一个Option对象
            let op = new Option(inText,inValue);

            let ops = s1.options;
            ops[ops.length] = op;
        }

        function f3(){
            let s1 = document.getElementById("s1");
            let index = s1.selectedIndex;

            let inText = document.getElementById("inText").value;
            let inValue = document.getElementById("inValue").value;

            // s1.options[index] = new Option(inText,inValue);
            // 简写方式
            s1[index] = new Option(inText,inValue);
        }

        function f4(){
            let s1 = document.getElementById("s1");
            s1[s1.selectedIndex] = null;
        }
        function f5(){
            let s1 = document.getElementById("s1");
            s1.length = 1;
        }
    </script>
</head>
<body>
文本值:<input type="text" id="inText"><br>
服务器值:<input type="text" id="inValue"><br>
<button onclick="f1()">测试</button>
<button onclick="f2()">添加</button>
<button onclick="f3()">修改选中项</button>
<button onclick="f4()">删除选中项</button>
<button onclick="f5()">清空</button>
<hr>
<select id="s1">
    <option value="-1">请选择</option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
    <option value="3">ccc</option>
</select>
</body>
</html>